<template>
	<view class="bg">


		<!-- #ifdef H5 -->
		<view class="category-list cont-mt">
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<view class="category-list cont-mt" :style="{'height':windowHeight}">
				<!-- #endif -->
				<!-- 左侧分类导航 -->

				<scroll-view scroll-y="true" class="left">
					<view class="row" :class="[0==showCategoryIndex?'on':'']" @tap="showCategory()">
						<view class="text">
							<view class="block"></view>
							{{hospitalName}}
						</view>
					</view>

				</scroll-view>
				<!-- 右侧子导航 -->
				<scroll-view scroll-y="true" class="right">

					<view class="category" v-for="(category,index) in categoryList" :key="category.id"
						@click="toCategory(category)">
						<view class="text">{{category.name}}</view>
						<image src="../../static/images/navigator-1.png" class="imagenav"></image>
					</view>

				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {


		data() {
			return {
				windowHeight: "200px",
				showCategoryIndex: 0,
				hospitalName: '',

				//分类列表
				categoryList: [{
						name: "",
					},

				],

				banner: '',

				adList: [{
					"pic": ""
				}],
				user_info: {},
				yuanquid:0
				
			}
		},
		onNavigationBarSearchInputClicked: async function(e) {

			this.$navigateTo(`/pages/goods/HM-search`);
		},
		onLoad(data) {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight + "px";
				}
			})
			this.yuanquid=data.id;

			var id = JSON.parse(data.id);
			this.categoryList[0].id = id;
			var datas = {
				info: JSON.stringify({

					"id": id
				})
			};
			this.$api.WxGetHospitlName(datas).then(res => {

				console.log('查到的数据:' + JSON.stringify(res));
				var name = res;
				var num = name.indexOf("（");
				var num2 = name.indexOf("）");
				name = name.substring(num + 1, num2);
				this.hospitalName = name;

			}).catch(err => {
				// 登录失败
				uni.hideLoading()
				uni.showToast({
					title: '查找失败',
					icon: 'none'
				});

			})




			this.$api.getadministrative(datas).then(res => {

				console.log('查到的数据:' + JSON.stringify(res));
				this.categoryList = res;
				console.log(this.categoryList)

			}).catch(err => {
				// 登录失败
				uni.hideLoading()
				uni.showToast({
					title: '查找失败',
					icon: 'none'
				});

			})


		},
		methods: {
			//分类切换显示
			showCategory(index) {
				this.showCategoryIndex = index;
				var list = this.categoryList;
				var cur_cate = {};
				for (var i in list) {
					var ite = list[i];
					if (i == index) {
						cur_cate = ite;
					}
				}
			},
			toCategory(e) {
				//uni.showToast({title: e.name,icon:"none"});
				uni.navigateTo({
					url: '/pages/appointment/appointment?name=' + e.name+'&id='+this.yuanquid
				});
			},
		}
	}
</script>
<style lang="scss">
	.category-list {
		//margin-top: 2.8rem;
		width: 100%;

		background-color: #fff;
		display: flex;

		.left,
		.right {
			//position: absolute;		
			//top: 100upx;
			//bottom: 0upx;
			// height: 1000rpx;
		}

		.left {
			width: 24%;
			left: 0upx;
			background-color: #f2f2f2;

			.row {
				width: 100%;
				height: 90upx;
				display: flex;
				align-items: center;

				.text {
					width: 100%;
					position: relative;
					font-size: 28upx;
					display: flex;
					justify-content: center;
					color: #3c3c3c;

					.block {
						position: absolute;
						width: 0upx;
						left: 0;
					}
				}

				&.on {
					height: 100upx;
					background-color: #fff;

					.text {
						font-size: 30upx;
						font-weight: 600;
						color: #2d2d2d;

						.block {
							width: 10upx;
							height: 80%;
							top: 10%;
							background-color: #f06c7a;
						}
					}
				}
			}
		}

		.right {
			// width: 76%;
			// left: 24%;
			margin: 30rpx 0rpx 0rpx 60rpx;

			.category {
				width: 100%;
				// padding: 100upx 15%;

				display: flex;
				// flex-wrap: wrap;


				// display: flex;
				// align-items: center;
				border-bottom: 1rpx solid #f1f2f5;

				// justify-content: center;
				.text {
					margin: auto 0rpx;
					width: 85%;
					float: left;
					// text-align: center;
				}

				.imagenav {

					// left: 340rpx;
					// top: 15rpx;
					float: right;
					// text-align: center;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					// margin: auto 15rpx auto 100rpx;

					width: 70rpx;
					height: 70rpx;
				}

				.banner {
					width: 100%;
					height: 5.5rem;
					border-radius: 10upx;
					overflow: hidden;
					box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3);


				}
			}
		}
	}
</style>
